<template>
  <div class="contain">
    <h1 align="center">手机推荐</h1>
    <ul id="list">
      <li
        v-for="(data, index) in $store.state.homeList"
        :key="index"
        @click="particulars(data.id)"
      >
        <div class="imgbox">
          <img class="img" v-lazy="data.picture" id="" />
          <p>限时优惠</p>
        </div>

        <div class="tip">
          <h2>{{ data.name }}</h2>
          <p>¥{{ data.price }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<style scoped>
.contain {
  width: 23.4375rem;
}
.contain > h1 {
  color: #000000;
  font-weight: bold;
  font-size: 17px;
  margin: 10px auto;
}
#list {
  width: 23.4375rem;
  float: left;
}
#list li {
  width: 45%;
  height: 180px;
  text-align: center;
  float: left;
  background-color: #ffffff;
  border-radius: 10px;
  margin: 0.5625rem;
}
#list li {
  margin-bottom: 5px;
}
.imgbox {
  width: 100%;
  height: 150px;
  text-align: center;
  background-color: #f0f0f0;
  margin: 5px auto;
  border-radius: 10px;
}
.imgbox img {
  width: 80%;
  height: 7.5rem;
  margin-top: 0.5rem;
}
.tip h2 {
  color: #505050;
}
.tip p {
  color: #d12b33;
}
ul {
  width: 100%;
}
ul li {
  width: 50%;
  height: 100px;
  float: left;
}
</style>

<style>
.van-toast__text {
  color: #fff;
}
.van-toast {
  width: 80px;
  min-height: 80px;
  padding: 0px;
}
.van-loading__circular {
  color: #d12b33;
}
</style>

<script>
export default {
  components: {},

  data () {
    return {
      dataList1: []
    }
  },
  mounted () {
    this.$toast.loading({
      message: '加载中...',
      forbidClick: true,
      duration: 1000
    })
    setTimeout(() => {
      if (this.$store.state.homeList.length === 0) {
        this.$store.dispatch('getHomeList').then((data) => {
          this.dataList1 = data
          console.log(data, 1111111111111)
          this.$toast.clear()
        })
      }
    }, 500)
  },
  methods: {
    // 详情跳转
    particulars (e) {
      this.$router.push({
        path: '/particulars',
        query: { id: e }
      })
    }
  }
}
</script>
